<template>
  <fieldset>
    <legend>商品</legend>
    <h1>商品：Products</h1>
    <ul>
      <li v-for="item in productData" :key="item.id">
        <b>产品名称：{{ item.title }}</b>
        ---------------
        <b>价格：{{ item.price }}</b>
        ---------------
        <b>库存：{{ item.inventory }}</b>
        <button :disabled="item.inventory == 0" @click="addCart(item)">
          加入购物车
        </button>
      </li>
    </ul>
  </fieldset>
</template>

<script>
//需求：
//1.请求服务器，在product组件里面渲染数据
//封装请求的方法
//请求放到vuex的action里面
//vuex需要模块化，并且添加mutations
//2.点击产品后面的按钮，需要将产品添加到购物车
//3.相同的数据添加到购物车之后，需要让购物车的数量加1，产品的库存减一
//4.总价计算
import { mapActions, mapState } from "vuex"; //引入辅助函数
import axios from "axios"; //引入axios
export default {
  methods: {
    addCart(current) {
      //current 就是点击按钮的这条数据
      console.log(current);
      this.ADD_CART(current);
    },
    ...mapActions("product", ["FETCH_PRODUCT"]), //映射
    ...mapActions("cart", ["ADD_CART"]),
  },
  computed: {
    //state映射写在这里面
    ...mapState("product", ["productData"]),
  },
  mounted() {
    //钩子函数
    this.FETCH_PRODUCT();
  },
  created() {
    //发功一个get请求
    axios
      .get("http://chst.vip/data/index.json", {
        //get请求的配置
        //请求头
        headers: {},
        //传递的参数
        params: {
          name: "lilililili",
        },
      })
      .then((res) => {
        console.log(res);
      });

    //发送post请求
    //语法：axios.post('地址',{传递的参数}，{请求的配置})
    axios
      .post(
        "/api/users/login",
        {
          username: "lbw",
          password: "555",
        },
        {
          //配置
          headers: {
            nickname: "jbjbjbjb",
          },
        }
      )
      .then((res) => {
        console.log(res);
      });

    //配置模式config
    axios({
      url: "/api/users/login", //请求地址
      method: "post", //请求方式
      // params:{},//get请求的传参字段
      data: {
        username: "admin",
        password: "admin",
      }, //post请求的传参字段
      headers: {}, //设置请求头
      timeout: 3000, //超时设置,请求3秒没有响应，直接进入catch
      withCredentials: true, //携带凭据（cookie）
    }).then((res) => {
      console.log(res);
    });
  },
};
</script>
